<template>
	<div class="v-multipleUpload">
		<ul class="my-flex-left">
			<li v-for="(item,index) in obj[key_]">
				<img :src="globaldata.imgThumbUrl+item"/>
				<div class="del"  @click="del(index)"></div>
			</li>
			<li v-if="obj[key_].length<5">
				<input class="upload" @change="uploadImg" type="file" multiple="multiple" />
				<img src="./upload.png" />
			</li>
		</ul>
	</div>
</template>
<script>
	import $ from 'jquery';
	export default {
		props: {
			obj:{
				type:Object,
				default:{}
			},
			key_:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				list: []
			}
		},
		mountd(){
			
		},
		methods: {
			del(i){
				this.obj[this.key_].splice(i,1)
			},
			uploadImg(ev) { //获取文件对象
				let that = this;
				let files = ev.target.files;
				//				var file = ev.target.files[0]
				console.log(111)
				for(let file of files) {
					console.log(file)
					//本地预览
					//					var oFReader = new FileReader();
					//					oFReader.readAsDataURL(file);
					//					oFReader.onload = function(oFREvent) {
					//						var s = oFREvent.target.result;
					//						var index = s.indexOf(',')
					//						var t = s.substring(index + 1, s.length)
					//						that.hasIocn = true
					//						$(ev.target).siblings('img').prop("src", s);
					//					};
					var filename = file.name
					var AllImgExt = ".jpg|.png|.jpeg|";
					var type = filename.substring(filename.lastIndexOf(".")).toLowerCase();
					var formData = new FormData();
					formData.append('file', file);
					this.httptool.ajaxFilePost('upload', formData, (res) => {
						this.obj[this.key_].push(
//							this.globaldata.imgThumbUrl+ res.data.id
							res.data.id
						)
//						console.log(this.obj[this.key_]);
					})
				}

				this.clearInputFile(ev.target)

			},
			clearInputFile(f) { //清除fileinput
				if(f.value) {
					try {
						f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
					} catch(err) {}
					if(f.value) { //for IE5 ~ IE10
						var form = document.createElement('form'),
							ref = f.nextSibling;
						form.appendChild(f);
						form.reset();
						ref.parentNode.insertBefore(f, ref);
					}
				}
			}
		}
	}
</script>
<style type="text/css" lang="less">
	/*@import '../../less/base/base.less';*/
	
	.v-multipleUpload {
		
		ul {
			width: 100%;
			flex-wrap: wrap;
			padding-top: 20px;
			li {
				width: 80px;
				height: 80px;
				/*border: 1px solid black;*/
				position: relative;
				margin-left: 40px;
				margin-bottom: 16px;
				&:first-child{
					margin-left:0;
				}
				img {
					width: 100%;
					height: 100%;
				}
			}
			.upload {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				opacity: 0.01;
			}
			.del{
				position: absolute;
				right: -11px;/*no*/
				top: -15px;/*no*/
				width: 25px;
				height: 25px;
				background-image: url(./del.png);
				background-size: 100% 100%;
			}
		}
	}
</style>